<template>
  <div>
    <hr>
    <div>
      错误写法
      <b>{{a1}}</b>
      <br>
      <vue-link href="demo/guide/01-1.html">html - demo</vue-link>
      <guide0101 />
      <div class="render-div">
        <pre>{{ subRender[0] }}</pre>
      </div>
    </div>

    <hr>
    <br>
    <hr>

    <div>
      正确写法
      <b>{{ a2 }}</b>
      <br>
      <vue-link href="demo/guide/01-2.html">html - demo</vue-link>
      <guide0102 />
      <pre>{{ subRender[1] }}</pre>
    </div>

  </div>
</template>

<script>
import guide0101 from './guide01-01.vue'
import guide0102 from './guide01-02.vue'
export default {
  components: { guide0101, guide0102 },
  data() {
    return {
      a1: `<p v-for="child in children" v-if="isFolder">{{child.title}}</p>`,
      a2: `
          <template v-if="isFolder">
            <p v-for="child in children">{{child.title}}</p>
          </template>
      `,
      selectIndex: 1,
      subRender: [`
function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    _vm._l(_vm.children, function(child) {
      return _vm.isFolder ? _c("p", [_vm._v(_vm._s(child.title))]) : _vm._e()
    }),
    0
  )
}
      `,`
function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _vm.isFolder
        ? _vm._l(_vm.children, function(child) {
            return _c("p", [_vm._v(_vm._s(child.title))])
          })
        : _vm._e()
    ],
    2
  )
}
      `]
    }
  }
}
</script>